/*
    button
*/
button {
    /*width: 135px;*/
    height: 36px;
    color: @text-inverse;
    font-size: 14px;
    outline: 0;
    border: none 0;
    cursor: pointer;
    border-radius: @border-radius;
    padding: 0 36px;

    &:disabled {
        cursor: default;
        opacity: .5;
    }

    &.btn {
        border: 1px solid @border-regular-control;
        background-color: @background-button;

        &.btn--landing {
            background-color: @background-accent-button;
            border: 0 none;
            color: @text-contrast-background;
        }

        &.btn--primary {
            background-color: @background-primary-button;
            border: 0 none;
        }

        &:not(.dropdown-toggle) {
            &:hover:not(:disabled) {
                border-color: @highlight-button-hover;
                background-color: @highlight-button-hover;
            }

            &:active:not(:disabled) {
                border-color: @highlight-button-pressed;
                background-color: @highlight-button-pressed;
            }

            &.btn--landing:not(:disabled) {
                &:hover {
                    background-color: @highlight-accent-button-hover;
                }

                &:active {
                    background-color: @highlight-accent-button-pressed;
                }
            }

            &.btn--primary {
                &:hover:not(:disabled) {
                    background-color: @highlight-primary-button-hover;
                }

                &:active:not(:disabled) {
                    background-color: @highlight-primary-button-pressed;
                }
            }
        }
    }

    .btn-quick {
        background-color: transparent;
    }

    &.btn--big {
        height: 50px;
    }

    &.btn--svg {
        padding: 5px;
    }

    svg.icon {
        height: 100%;
        width: 100%;
    }
}

/* 
    radio button style 
*/
@color1: #f4f4f4;
@color2: #3197EE;
@rb-height: 18px;

input[type=checkbox] {
    position: relative;
    cursor: pointer;

    &:before {
        content: "";
        display: block;
        position: absolute;
        width: 18px;
        height: 18px;
        top: 0;
        left: 0;
        border: @scaled-one-px solid @border-regular-control;
        border-radius: 3px;
        background-color: @background-normal;
    }

    &:checked:after {
        content: "";
        display: block;
        width: 5px;
        height: 10px;
        border: solid @text-normal;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        position: absolute;
        top: 3px;
        left: 7px;
    }
}

input[type="radio"] {
    position: absolute;
    opacity: 0;

    + label:before {
            content: '';
            background: @color1;
            border-radius: 100%;
            border: 1px solid darken(@color1, 25%);
            display: inline-block;
            width: @rb-height;
            height: @rb-height;
            position: relative;
            /*top: -0.1em;*/
            margin-right: 1em; 
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            transition: all 250ms ease;
    }

    &:checked {
        + label:before {
            background-color: @color2;
            box-shadow: inset 0 0 0 3px @color1;
        }
    }

    &:focus {
        + label:before {
            outline: none;
            border-color: @color2;
        }
    }

    &:disabled {
        + label:before {
            box-shadow: inset 0 0 0 3px @color1;
            border-color: darken(@color1, 25%);
            cursor: default;
        }

        &:checked {
            + label:before {
                background: darken(@color1, 25%);
            }
        }
    }

    + .label:empty:before {
        margin-right: 0;
    }
}

/* 
    check box style
*/
@switch-height: 20px;
@switch-width: 45px;

.switch-labeled {
    .onoffswitch {
        margin-right: 20px;
    }
}

.onoffswitch {
    /*display: none;*/

    position: relative;
    width: @switch-width;
    -webkit-user-select:none;
}

.onoffswitch__checkbox {
    display: none;

    &:disabled {
        + label {
            cursor: default;
            pointer-events: none;
            opacity: 0.7;
        }
    }

    &:checked + .onoffswitch__label {
        background-color: @color2;
    }

    &:checked + .onoffswitch__label {
        border-color: @color2;

        &:before {
            border-color: @color2;
            right: 0px;
        }
    }
}

.onoffswitch__label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: @switch-height;
    padding: 0;
    line-height: @switch-height;
    border: 2px solid darken(@color1, 25%);
    border-radius: @switch-height;
    background-color: darken(@color1, 25%);
    transition: all 0.25s ease-in;
    box-sizing: content-box;

    &:before {
        content: "";
        display: block;
        width: @switch-height;
        margin: 0px;
        background: #FFF;
        position: absolute;
        top: 0;
        bottom: 0;
        right: @switch-width - 24;
        border: 2px solid darken(@color1, 25%);
        border-radius: @switch-height;
        transition: all 0.25s ease-in 0s;
    }
}

/*
    tooltip
*/
[tooltip] {
    &:before {
        position : absolute;
        content : attr(tooltip);
        opacity : 0;

        color: @text-normal;
        border: 1px solid @border-regular-control;
        background: @background-normal;
        border-radius: 4px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        padding: 5px 12px;
        font-size: 11px;
        z-index: 1;
        transition: all .3s ease-in-out .25s;
        pointer-events:none;
        font-weight: normal;    
    }

    &[tooltip-pos=top]:before {
        margin: -40px 0 0 -10px;
    }
}

[tooltip]:hover:before {
    opacity : 1;
}

/* 
    combo-box
*/
.box-cmp-select {
    /*display: inline-block;*/
    font-size: 0;
    width: 200px;

    &:hover:after {
        /*border-color: @color-gray;*/
    }

    .dropdown.bootstrap-select:not([class=combo-box]) {
        width: 100%;
    }

    .btn {
        background-color: @background-normal;
        border: @scaled-one-px solid @border-regular-control;
        color: @text-normal;
        padding-left: 15px;
        padding-right: 35px;

        &:hover {
            background-color: @background-normal;
        }

        &:focus {
            outline: 0 none !important;
            border-color: @border-control-focus;
        }

        .filter-option {
            display: flex;
            align-items: center;

            &:focus {
                outline: @border-control-focus solid 1px;
            }
        }
    }
}

.bootstrap-select {
    .dropdown-toggle { 
        .caret {
            border: solid @icon-normal;
            border-width: 2px 2px 0 0;
            width: 10px;
            height: 10px;
            transform: rotate(135deg);
            margin-top: -7px;

            transition: transform .2s, margin .2s;
        }
    }

    &.open {
        .caret {
            transform: rotate(315deg);
            margin-top: -4px;
        }
    }

    .dropdown-menu li small {
        padding-left: 0;
        display: block;
    }
}

/*
*    dropdown menu
*
*/
.dropdown-menu {
    background-color: @background-normal;
    border: @scaled-one-px solid @border-regular-control;

    li > a {
        cursor: pointer;
        font-size: 13px;
        color: @text-normal;

        &:hover, &:focus {
            outline: none;
            color: @text-normal-pressed;
            background-color: @highlight-button-hover;
        }

        & small {
            color: @text-secondary;
        }
    }

    > .active > a {
        background-color: @highlight-button-pressed;
        color: @text-normal-pressed;

        &:hover, &:focus {
            background-color: @highlight-button-pressed;
            color: @text-normal-pressed;
        }

        & small.text-muted {
            color: @text-secondary !important;
        }
    }

    > .disabled > a {
        color: @text-normal;
        opacity: @disabled-element-opacity;

        &:hover {
            cursor: default;
            color: @text-normal;
        }
    }
}

/*
*     text input
*
*/

.tbox {
    color: @text-normal;
    border: @scaled-one-px solid @border-regular-control;
    width: 100%;
    outline: 0;
    background: @background-normal;
    font-size: 14px;
    padding: 0 15px;

    height: 36px;
    border-radius: 3px;

    &.error {
        border-color: #e3a8a7;
    }

    &:disabled {
        opacity:0.7;
    }

    &:focus {
        border-color: @border-control-focus;
    }

    &::selection{
        background: @highlight-text-select;
        color: @text-inverse;
    }
}

::-webkit-input-placeholder {
   color: @text-tertiary;
}
